<style type="text/css">
    .action-cell {
        margin-bottom: 20px;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }
</style>
<template>
    <div style="min-width: 1024px">
        <h4>进出记录</h4>
        <Alert show-icon>
            此处用于查看进出记录。
        </Alert>
        <Tabs value="1" @on-click="tabCLickEvent">
            <TabPane label="人员" name="1">
                <ButtonGroup>
                    <Input v-model="searchKey">
                        <Select slot="prepend"  style="width: 80px">
                            <Option value="人员">人员名称</Option>
                        </Select>
                        <Button @click="mockTableData()" slot="append" icon="ios-search"></Button>
                    </Input>
                </ButtonGroup>
                <Row>
                    <Col>
                        <Table :context="self" :data="tableData" :columns="tableColumns" stripe border
                               @on-select="tableItemChecked" @on-select-cancel="tableItemChecked"
                               @on-select-all="tableItemChecked"
                               @on-select-all-cancel="tableItemChecked"
                               style="margin-top:15px;">
                        </Table>
                    </Col>
                </Row>
            </TabPane>
            <TabPane label="车辆" name="2">
                <ButtonGroup>
                    <Input v-model="searchKey">
                        <Select slot="prepend" style="width: 80px">
                            <Option value="车辆">车辆</Option>
                        </Select>
                        <Button @click="mockTableData()" slot="append" icon="ios-search"></Button>
                    </Input>
                </ButtonGroup>
                <Row>
                    <Col>
                        <Table :context="self" :data="tableData" :columns="tableColumns" stripe border
                               @on-select="tableItemChecked" @on-select-cancel="tableItemChecked"
                               @on-select-all="tableItemChecked"
                               @on-select-all-cancel="tableItemChecked"
                               style="margin-top:15px;">
                        </Table>
                    </Col>
                </Row>
            </TabPane>
            <TabPane label="访客" name="3">
                <ButtonGroup>
                    <Input v-model="searchKey">
                        <Select slot="prepend" style="width: 80px">
                            <Option value="访客">访客</Option>
                        </Select>
                        <Button @click="mockTableData()" slot="append" icon="ios-search"></Button>
                    </Input>
                </ButtonGroup>
                <Row>
                    <Col>
                        <Table :context="self" :data="tableData" :columns="tableColumns" stripe border
                               @on-select="tableItemChecked" @on-select-cancel="tableItemChecked"
                               @on-select-all="tableItemChecked"
                               @on-select-all-cancel="tableItemChecked"
                               style="margin-top:15px;">
                        </Table>
                    </Col>
                </Row>
            </TabPane>
            <TabPane label="访客车辆" name="4">
                <ButtonGroup>
                    <Input v-model="searchKey">
                        <Select slot="prepend" style="width: 80px">
                            <Option value="访客车辆">访客车辆</Option>
                        </Select>
                        <Button @click="mockTableData()" slot="append" icon="ios-search"></Button>
                    </Input>
                </ButtonGroup>
                <Row>
                    <Col>
                        <Table :context="self" :data="tableData" :columns="tableColumns" stripe border
                               @on-select="tableItemChecked" @on-select-cancel="tableItemChecked"
                               @on-select-all="tableItemChecked"
                               @on-select-all-cancel="tableItemChecked"
                               style="margin-top:15px;">
                        </Table>
                    </Col>
                </Row>
            </TabPane>
        </Tabs>


    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                self: this,
                tableData: [],
                //筛选
                searchKey: '',
                sortTypeId: '1',
                //添加
                formValidate: {
                    //添加字段
                    Areatitle: '',
                },
                chooseAreaArr: [],
                addModal: false,
                //编辑
                formValidate2: {
                    //添加字段
                    title: '',
                },
                addModal2: false,
                //操作按钮状态管理
                deleteBtnEnable: true,
                selectedItems: [],
                //表格
                total: 0,
                current: 1,
                tableColumns: [
                    {
                        title: '人员姓名',
                        key: 'AccountName',
                        align: 'center',
                    },
                    {
                        title: '登记时间',
                        key: 'Logdate',
                        align: 'center',
                    },
                    {
                        title: '通行类型',
                        key: 'Passtype',
                        align: 'center',
                        filters: [
                            {
                                label: '进入',
                                value: '进入'
                            },
                            {
                                label: '外出',
                                value: '进入'
                            }
                        ],
                        filterMultiple: false,
                        filterMethod(value, row) {
                            if (value === "进入") {
                                return row.Passtype == '进入';
                            } else if (value === "外出") {
                                return row.Passtype == '外出';
                            }
                        }
                    },
                    {
                        title: '进出采集的照片',
                        key: 'Photourl',
                        align: 'center',
                    },
                    {
                        title: '门区名称',
                        key: 'Gatename',
                        align: 'center',
                    },
                    {
                        title: '状态',
                        key: 'State',
                        align: 'center',
                    },
                ]
            }
        },
        mounted() {
            this.mockTableData();
        },
        methods: {
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },
            mockTableData() {
                let that = this;

                let para = {
                    currPage: this.current,
                    pageSize: 10,
                    logtype: this.sortTypeId,
                    key: this.searchKey,
                    inouttype: '0', //0是所有都显示，1是进入，2是外出
                };
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.PassLogs, para, function (res) {
                    that.$Loading.finish();
                    that.tableData = res.Msg;
                });

            },
            //tab点击
            tabCLickEvent: function (name) {
                this.sortTypeId = name;
                this.tableColumns.shift();
                if (name == 1) {
                    this.tableColumns.unshift(
                        {
                            title: '人员姓名',
                            key: 'AccountName',
                            align: 'center',
                        }
                    )
                }else if(name ==2 ){
                    this.tableColumns.unshift(
                        {
                            title: '车牌号',
                            key: 'Car',
                            align: 'center',
                        },
                    )
                }else if(name ==3){
                    this.tableColumns.unshift(
                        {
                            title: '访客姓名',
                            key: 'VisitorName',
                            align: 'center',
                        },
                    )
                }else {
                    this.tableColumns.unshift(
                        {
                            title: '访客车辆车牌号',
                            key: 'VisitorCar',
                            align: 'center',
                        },
                    )
                }
                this.mockTableData();
            },
            changePage(row) {
                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
                console.log("row", row);
                this.current = row;
                this.mockTableData();
            },

        },
    }
</script>
